<template>
	<!-- 商家入驻 -->
	<view class="bg-white" style="min-height: 100vh;">
		<view class="" v-if="review_status == -1 || review_status == null ">
			<view class="err flex-c" v-if="review_status == -1">
				审核失败：主营类型与营业执照不一致，重新修改提交！
			</view>
			<view class="head bg-white">
				<view class="name">
					<text>主营类型</text>
					<picker mode="selector" :range="type" @change="handletype">
						<view class="input" :class="{picker:typeIndex ==-1}">{{typeIndex==-1?'请选择主营类型':type[typeIndex]}}
						</view>
					</picker>
				</view>
				<view class="name">
					<text>经营分类</text>
					<picker mode="selector" :range="classList" @change="handleclass">
						<view class="input" :class="{picker:classIndex ==-1}">{{classIndex==-1?'请先选择主营类型':classList[classIndex]}}
						</view>
					</picker>
				</view>
				<view class="name" @click="onShowClass()">
					<text>二级经营分类</text>
					<view class="input">
						<view v-if="showClass()">{{showClass()}}</view>
						<input placeholder="请先选择经营分类"
						 placeholder-style="color:#999" disabled v-else/>
					</view>
				</view>
				<view class="name">
					<text>姓名</text>
					<view class="input">
						<input type="text" :value="name" placeholder="请输入姓名" placeholder-style="color:#999999;"
							maxlength="6" @input="handlename">
					</view>
				</view>
				<view class="name">
					<text>电话</text>
					<view class="input">
						<input type="number" :value="phone" placeholder="请输入电话" placeholder-style="color:#999999;"
							maxlength="11" @input="handlephone">
					</view>
				</view>
				<view class="name">
					<text>店铺名称</text>
					<view class="input">
						<input type="text" :value="company" placeholder="请输入店铺名称" placeholder-style="color:#999999;" @input="handlecompany">
					</view>
				</view>
				<view class="name">
					<text>店铺简介</text>
					<view class="input">
						<input type="text" :value="intro" placeholder="请输入店铺简介" placeholder-style="color:#999999;" @input="handleintro">
					</view>
				</view>
				<view class="name">
					<text>店铺区域地址</text>
					<view class="input">
						<picker mode="region" range="" @change="handleRange">
							<view :class="{picker:!value[0]}">{{value[0]?value[0]+value[1]+value[2]:'请选择店铺区域地址'}}</view>
						</picker>
					</view>
				</view>
				<view class="name">
					<text>店铺详细地址</text>
					<view class="input">
						<input type="text" :value="address" placeholder="请输入店铺详细地址" placeholder-style="color:#999999;"
							@input="handleaddress">
					</view>
				</view>
				<view class="image flex-c">
					<view class="img flex-c" @click="handleImg(2)" v-if="imgcover == ''">
						<text class="cuIcon-camerafill"></text>
					</view>
					<view class="img_div" v-else @click="handleImg(1)" @longpress="cover='',imgcover=''">
						<image :src="imgcover" mode=""></image>
					</view>
				</view>
				<view class="text">请上传店铺封面</view>
				
				<!--  -->
				<view class="image flex-c">
					<view class="img flex-c" @click="handleImg(3)" v-if="img == ''">
						<text class="cuIcon-camerafill"></text>
					</view>
					<view class="img_div" v-else @click="handleImg(1)" @longpress="img='',Image=''">
						<image :src="img" mode=""></image>
					</view>
				</view>
				<view class="text">请上传营业执照</view>
				<view class="button flex-c" @click="Submit">提交</view>
			</view>
			<!-- 协议内容 -->
			<view class="agreement modal_view" v-if="isshow">
				<view class="agreement_text bg-white">
					<scroll-view scroll-y="true" class="screen-swiper">
						<view v-html="text"></view>
					</scroll-view>
					<view class="colse flex align-center">
						<image src="/static/gou.png" mode="" v-if="!isshow" @click="handleisshow"></image>
						<image src="/static/gou2.png" mode="" @click="handleisshow"></image>
						<text>阅读并同意《协议条款》</text>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 100vh;" v-else>
			<view class="solid"></view>
			<view class="">
				<view class="div flex-c">
					<view class="solid_div">
						<view class="A flex-c" :class="{isthis:review_status >= 0}">
							1
							<text>入驻</text>
						</view>
						<view class="B flex-c" :class="{isthis:review_status >= 1}">
							2
							<text>支付</text>
						</view>
						<view class="C flex-c" :class="{isthis:review_status == 2}">
							3
							<text>完成</text>
						</view>
						<view class="D" :class="{D0:review_status >= 0}"></view>
						<view class="D" :class="{D1:review_status>=1}"></view>
						<view class="D" :class="{D2:review_status==2}"></view>
					</view>
				</view>
				<view class="" v-if="review_status == 0">
					<view class="solid"></view>
					<view class="flex-c img_tt">
						<image src="/static/shenhe.png" mode=""></image>
					</view>
					<view class="text_tt">商家入驻还在审核中，请耐心等待...</view>
				</view>
				<view class="foot bg-white" v-if="review_status == 1">
					<view class="title">入驻费</view>
					<view class="colse_list">
						<view class="list_item flex align-center" v-for="(item,j) in Text" :key="j"
							@click="handlecolse(j)">
							<image src="/static/gou.png" mode="" v-if="j == colse"></image>
							<image src="/static/gou2.png" mode="" v-else></image>
							<text>{{item.title}}</text>
						</view>
					</view>
					<view class="button flex-c" @click="pay">立即支付</view>
				</view>
				<view class="" v-if="review_status == 2">
					<view class="solid"></view>
					<view class="flex-c img_tt">
						<image src="/static/shenhe.png" mode=""></image>
					</view>
					<view class="text_tt">支付成功，已完成商家入驻！</view>
					<view class="button flex-c" @click="navigeta">马上进入商家端 {{time}}s</view>
				</view>
			</view>
		</view>
		<view class="modal_view" v-if="isOpen">
			<view class="modal_view_div">
				<view class="btn-view">
					<view class="btn-cancel" @click="onPopupClose()">取消</view>
					<view class="btn-confrim" @click="onPopupConfrim()">确认</view>
				</view>
				<scroll-view scroll-y="true" class="list-swiper">
					<view class="class-view">
						<view class="class-item" v-for="(item,index) in classItem2" 
						 :key="index" @click="onCheck(item)">
							<image class="checkIcon" src="/static/gou.png" v-if="item.check"></image>
							<image class="checkIcon" src="/static/gou2.png" v-else></image>
							<view class="class-title">{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOpen: false,
				review_status: null,
				typeIndex: -1,
				type: [], //
				typeId: '',
				classIndex: -1,
				classId:'',
				classItem: [],
				classList: [],
				classItem2: [],
				classList2: [],
				typedata: [], //类型数据
				isshow: 0, //默认1显示协议，0隐藏
				colse: 0, //入驻费用选择
				text: '', //协议
				Text: [], //入驻费用
				cover:'',
				imgcover:'',
				name: '',
				phone: '',
				company: '',
				intro:'',
				Image: '',
				img: '',
				value: [], //省市区
				address: '',
				time: 3,
				T: '',
				id: '',
				is_endtime: '', //入驻规则（是否入驻收费）
				shop: ''
			};
		},
		methods: {
			handletype(e) {
				this.typeIndex = e.detail.value
				this.typeId = this.typedata[this.typeIndex].id;
				this.classData();
			},
			handleclass(e){
				this.classIndex = e.detail.value
				this.classId = this.classItem[this.classIndex].id;
				this.classItem2 = [];
				this.classList2 = [];
				this.classData2();
			},
			onShowClass() {
				if (this.classItem2.length > 0) {
					this.isOpen = true;
				} else {
					this.$utils.tips('未获取到经营分类')
				}
			},
			showClass(){
				let data = []; 
				if(this.classList2.length > 0 ){
					this.classList2.forEach((item,index)=>{
						data.push(item.name);
					});
					return data.join(',');
				}
				return '';
			},
			onPopupClose(){
				this.isOpen = false;
			},
			onCheck(item){
				if(item.check){
					item.check = false;
				}else{
					item.check = true;
				}
				this.$forceUpdate();
			},
			onPopupConfrim(){
				this.isOpen = false;
				this.classList2 = [];
				this.classItem2.forEach((item,index)=>{
					if(item.check){
						this.classList2.push(item);
					}
				});
				this.$forceUpdate();
			},
			handlename(e) {
				this.name = e.detail.value
			},
			handlephone(e) {
				this.phone = e.detail.value
			},
			handlecompany(e) {
				this.company = e.detail.value
			},
			handleintro(e){
				this.intro = e.detail.value
			},
			handleImg(i,k) {
				if (i == 1 ) {
					this.$utils.tips('长按可删除图片')
				} else {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: (res) => {
							uni.showLoading({
								title: '正在上传',
								mask: true
							});
							this.$api.upImage(res.tempFilePaths[0]).then(Res => {
								uni.hideLoading();
								console.log(Res);;
								if (Res) {
									if(i==2){
										this.imgcover = this.$base + Res
										this.cover = Res
									}
									if(i==3){
										this.img = this.$base + Res
										this.Image = Res
									}
								}
							});
						}
					});
				}
			},
			handleRange(e) {
				this.value = e.detail.value
			},
			handleaddress(e) {
				this.address = e.detail.value
			},
			Submit() {
				if (this.phone == '') {
					this.$utils.tips('请输入手机号')
					return
				}
				if (this.name == '') {
					this.$utils.tips('请输入姓名')
					return
				}
				if(this.company == ''){
					this.$utils.tips('请输入店铺名称')
					return
				}
				if (this.typeId == '') {
					this.$utils.tips('请选择主营类型')
					return
				}
				if (this.classId == '') {
					this.$utils.tips('请选择经营分类')
					return
				}
				if (this.classList2.length <= 0) {
					this.$utils.tips('请先选择经营分类')
					return
				}
				if (this.value == []) {
					this.$utils.tips('请选择公司区域地址')
					return
				}
				if (this.address == '') {
					this.$utils.tips('请输入公司详细地址')
					return
				}
				if (this.Image == '') {
					this.$utils.tips('请上传营业执照')
					return
				}
				let category = []
				this.classList2.forEach((item,index)=>{
					category.push(item.id);
				});
				let obj = {
					main_id: this.typeId,
					category_id: this.classId,
					second_category_ids: category.join(','),
					contact_person: this.name,
					contact_phone: this.phone,
					shop_province: this.value[0],
					shop_city: this.value[1],
					shop_district: this.value[2],
					shop_address: this.address,
					business_license: this.Image,
					shop_name: this.company,
					shop_cover: this.cover, //封面
					shop_intro:this.intro,
				}
				console.log('提交数据',obj);
				this.$api.SettleIn( obj,true).then(res => {
					console.log(res);
					if (res && res.code == 200001) {
						this.$utils.tips('提交成功,请耐心等待后台审核')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							}, 500)
						})
					}
				})
			},
			handlecolse(i) {
				this.colse = i
			},
			pay() { //立即支付
				this.$api.money_order({
					settled_fee_id: this.Text[this.colse].id
				}, 1).then(res => {
					if (res.code == 200001) {
						this.id = res.data.id
						this.$api.money_order_pay({}, this.id, 1).then(res => {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timeStamp,
								nonceStr: res.data.nonceStr,
								package: res.data.package,
								signType: res.data.signType,
								paySign: res.data.paySign,
								orderInfo: res.data.prepay_id,
								success: (r) => {
									console.log(r, 3);
									this.$api.money_order_notify({}, this.id, 1).then(res => {
										console.log(res, '4');
										if (res.code == 200001) {
											uni.setStorageSync("status", 2)
											this.review_status = 2
											this.T = setInterval(() => {
												this.time--
												if (this.time == 0) {
													this.navigeta()
													clearTimeout(this.T)
												}
											}, 1000)
										}
									})
								},
								fail(err) {
									console.log(err);
								}
							})

						})
					}
				})
			},
			handleisshow() {
				this.isshow = 0
			},
			navigeta() {
				this.T = null
				uni.navigateTo({
					url: '/pageA/index'
				})
			},
			classData() {
				let self = this;
				self.classList = [];
				this.$api.merchants_class({}, this.typeId, true).then(res => { 
					if (res.code == 200001) {
						self.classItem = res.data;
						this.classItem.forEach((item,index)=>{
							this.classList.push(item.name);
						});
					}
				})
			},
			classData2() {
				let self = this;
				this.$api.merchants_class2({}, this.classId, true).then(res => { 
					if (res.code == 200001) {
						self.classItem2 = res.data;
					}
				})
			},
		},
		onShow() {
			if (uni.getStorageSync("status") == 2) {
				this.time = 10
				this.T = setInterval(() => {
					this.time--
					if (this.time == 0) {
						this.navigeta()
						clearTimeout(this.T)
					}
				}, 1000)
			}
		},
		onLoad() {
			let self = this;
			this.$api.merchants_info({}, 1).then(res => { //商家信息
				if (res.code == 200001) {
					this.shop = res.data
					if (uni.getStorageSync("status") == '') {
						this.review_status = res.data.review_status //审核状态 0 审核中 1 通过 -1失败
					} else {
						this.review_status = uni.getStorageSync("status")
					}
					if (res.data.review_status == -1) {
						this.name = res.data.contact_person,
							this.phone = res.data.contact_phone,
							this.Image = res.data.business_license, //营业执照
							this.img = this.$base + res.data.business_license,
							this.value = [res.data.shop_province, res.data.shop_city, res.data.shop_district],
							//省市区
							this.address = res.data.shop_address
					}
					let t = new Date(this.shop.settled_expiry_time.replace(/-/g, "/")).getTime() / 1000; //到期时间戳
					let newt = Date.parse(new Date()) / 1000 //当前时间戳
					if (this.review_status == 1 && t > newt) {
						uni.setStorageSync("status", 2)
					} else if (this.review_status == 1 && t < newt) {
						uni.showModal({
							title: '您的入驻已到期',
							content: '是否续费',
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: './SettleIn2'
									})
								} else {
									uni.navigateBack()
								}
							}
						})
					}
					if (this.review_status == 0 && t > newt) {
						uni.setStorageSync("status", 2)
					} else if (this.review_status == 0 && t > newt) {
						uni.showModal({
							title: '提示',
							content: '您的入驻已到期，你联系平台管理员续费',
							success(res) {
								if (res.confirm) {
									uni.navigateBack()
								} else {
									uni.navigateBack()
								}
							}
						})
					}
				}
			})
			this.$api.merchants_settled_rule().then(res => { //入驻规则
				this.is_endtime = res.data
				if (this.is_endtime.settled_fee_is_open == 0 && this.review_status == 1) { //免费且审核通过
					uni.setStorageSync("status", 2)
				}

			})
			this.$api.text({}, true).then(res => { //入驻协议
				if (res.code == 200001) {
					this.text = res.data
				}
			})
			this.$api.merchants_type({}, true).then(res => { //入驻类型
				if (res.code == 200001) {
					self.typedata = res.data
					for (let i = 0; i < res.data.length; i++) {
						self.type[i] = res.data[i].name
					}
				}
			})
			this.$api.money({}, 1).then(res => { //入驻费用
				if (res.code == 200001) {
					this.Text = res.data
				}
			})
		},
		onUnload() {
			clearTimeout(this.T)
		}
	}
</script>

<style lang="scss">
	.modal_view_div {
		width: 100%;
		height: 650rpx;
		text-align: center;
		position: absolute;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0px 0px;
		overflow: hidden;
		z-index: 1500;

	}

	.btn-view {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #f5f5f5;
	}

	.btn-cancel {
		color: #666;
		font-size: 30rpx;
		padding: 20rpx;
	}

	.btn-confrim {
		color: #1CD699;
		font-size: 30rpx;
		padding: 20rpx;
	}

	.list-swiper {
		height: 550rpx;
	}

	.class-view {
		display: flex;
		flex-direction: column;
	}

	.class-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 15rpx;
	}

	.checkIcon {
		width: 38rpx;
		height: 38rpx;
		margin-left: 40rpx;
		margin-right: 20rpx;
	}
	
	.class-title{
		font-size: 30rpx;
		color: #333;
	}

	.err {
		width: 682rpx;
		height: 80rpx;
		margin: auto;
		background: #FFF0F0;
		border-radius: 10px;
		font-size: 26rpx;
		color: #FF2E2E;
	}

	.head {
		width: 750rpx;
		height: auto;
		margin-top: 1rpx;
		padding-bottom: 20rpx;

		.name {
			padding: 30rpx 0 0 36rpx;

			text {
				font-size: 26rpx;
				color: #333;
				font-weight: 500;
			}

			.input {
				width: 682rpx;
				height: 80rpx;
				margin-top: 20rpx;
				background: #F8F8F8;
				border-radius: 10rpx;
				padding: 20rpx 22rpx;

				input {
					font-size: 28rpx;
				}

			}

			.picker {
				color: #999;
			}
		}

		.image {
			width: 309rpx;
			height: 194rpx;
			background: #F9F9F9;
			box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.09);
			border-radius: 10rpx;
			margin-left: 39rpx;
			margin-top: 46rpx;

			.img {
				border-radius: 50%;
				width: 94rpx;
				height: 94rpx;
				background: RGBA(130, 137, 141, .5);

				.cuIcon-camerafill {
					font-size: 44rpx;
				}
			}
		}

		.img_div {
			width: 309rpx;
			height: 194rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.text {
			margin-left: 83rpx;
			margin-top: 14rpx;
			font-size: 24rpx;
			color: #333;
		}
	}

	.foot {
		width: 100%;
		height: 614rpx;
		margin-top: 10rpx;
		padding: 36rpx;

		.title {
			font-size: 26rpx;
			color: #333;
		}

		.colse_list {
			.list_item {
				margin-top: 38rpx;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}

		.button {
			width: 650rpx;
			height: 80rpx;
			background: #1CD699;
			border-radius: 10rpx;
			color: #fff;
			margin: 62rpx auto;
		}
	}

	.agreement {
		z-index: 1;

		.agreement_text {
			width: 100%;
			height: calc(100vh - 70rpx);
			position: absolute;
			bottom: 0;

			.screen-swiper {
				height: calc(100vh - 110rpx);

				view {
					padding: 29rpx 26rpx 0 26rpx;
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 70rpx;
				}
			}

			.colse {
				position: fixed;
				bottom: 20rpx;
				width: 100%;
				height: 110rpx;
				background: #FFFFFF;
				box-shadow: 0px -3px 10px 1px rgba(0, 0, 0, 0.07);

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 48rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.button {
		width: 648rpx;
		height: 80rpx;
		background: #1CD699;
		border-radius: 10rpx;
		color: #FFFFFF;
		margin: auto;
		margin-top: 170rpx;
	}

	.div {
		width: 100%;
		height: 192rpx;
		padding: 40rpx 36rpx;
		overflow: hidden;

		.solid_div {
			width: 632rpx;
			height: 10rpx;
			background: #CCCCCC;
			position: relative;

			.A,
			.B,
			.C {
				position: absolute;
				z-index: 2;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background: #CCCCCC;
				top: -20rpx;
				color: #fff;
				font-size: 36rpx;

				text {
					position: absolute;
					top: 50rpx;
					left: -5rpx;
					font-size: 28rpx;
					color: #999;
					white-space: nowrap;
				}
			}

			.isthis {
				background: #1CD699;
			}

			.A {
				left: -20rpx;
			}

			.B {
				left: 0;
				bottom: 0;
				right: 0;
				top: 0;
				margin: auto;
			}

			.C {
				right: -20rpx;
			}

			.D {
				position: absolute;
				top: 0;
				z-index: 1;
				height: 100%;
				width: 158rpx;
				background: #1CD699;
			}

			.D0 {
				left: 0;
			}

			.D1 {
				width: 316rpx;
				left: 158rpx;
			}

			.D2 {
				right: 0;
			}

		}

	}

	.img_tt {
		image {
			width: 128rpx;
			height: 128rpx;
			margin-top: 94rpx;
		}
	}

	.text_tt {
		text-align: center;
		margin-top: 31rpx;
		font-size: 30rpx;
		color: #1CD699;
	}
</style>
